<template>
  <div>
    <view class="content">
     <image class='background' src="../../static/images/back.jpg" mode="aspectFill"></image>
    </view>
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/gradenum.png" mode="aspectFill"></image></div>
</div>
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/number.png" mode="aspectFill"></image></div>
</div>
</div>
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{gradeNum}}个年级</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{wrongNum}}错题</div>
</div>
</div>
    <div>
      <button v-for="item in grades" :key= "item" class="grade_button" hover-class="grade_button_hover" @click="goSubject(item)">
        {{item}}
      </button>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      gradeNum: 0,
      wrongNum: 0,
      grades: []
    }
  },
  methods: {
    goSubject (grade) {
      const url = ('../subject/main?grade=' + grade)
      wx.navigateTo({url})
    },
    requestGrade () {
      let _that = this
      var api = 'http://120.25.78.18:8010/api/userInfo?id=1'
      wx.request({
        url: api, // 仅为示例，并非真实的接口地址
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          for (var i = 0; i < res.data.grades.length; i++) {
            _that.grades.push(res.data.grades[i])
            _that.gradeNum += 1
          }
          _that.wrongNum = res.data.wrongTitleSum
        }
      })
    }
  },

  created () {
    this.requestGrade()
  }
}
</script>

<style scoped>
.grade_button {
  width:80%;
  margin-top: 60rpx;
  margin-bottom: 60rpx;
  background-color: #FFB5C5;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.grade_button_hover {
  opacity: 0.5;
}
.placeholder {
  margin: 5px;
  padding: 0 10px;
  height: 1em;
  line-height: 2.3em;
  text-align: center;
  color: black;
}
.placeholder2 {
margin-left: 65px;
margin-right: 5px;
margin-top:15px;
margin-bottom: 5px;
padding: 0 10px;
height: 2.3em;
line-height: 1em;
}
.titleicons{
  position:absolute;
  width:10%;
  height: 8%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
  z-index: -1;
}
</style>

